<template>
  <div class="bankCardInfo">
    <van-nav-bar
        :title="$t('bank_my_receiving_bank_card')"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <div style="padding: 10px">
      <div class="content_list">
        <!--        收款银行-->
        <div class="content_item" v-for="(item,index) in myCardList" :key="item.id" @click="onDefaultClick(item)">
          <div class="card_box"
               :style="{background:index === 0 ? '#FF6A4E' : 'linear-gradient(0deg, #0DA87E, #0C6257)'}">
            <div class="card_header">
              <div class="title">{{ item.bankcardName }}</div>
              <div class="is_default">
                {{ item.isSelected === 1 ? $t('default_checked') : $t('default_set') }}
              </div>
            </div>
            <div class="card_content">
              {{ item.bankcard }}
            </div>
          </div>
        </div>
        <div class="confirm">
          <button @click="confirm">{{ $t('add') }}</button>
        </div>
      </div>
      <van-action-sheet v-model:show="defaultShow">
        <van-picker @confirm="onDefaultSelect" @cancel="defaultShow = false"
                    :columns-field-names="{  text: 'value'}"
                    :columns="defaultActions"/>
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
import {reactive, ref, toRefs} from 'vue'
import {fetchMyCard, upDateMyCard} from '@/api/home'
import {useI18n} from 'vue-i18n'
import {Toast} from "vant";
import router from "@/router";
import {dateFormat} from "@/utils/tool";
import {useRoute} from "vue-router";
import {useStore} from "vuex";

export default {
  setup() {
    const {tm} = useI18n()
    const store = useStore()
    const myCardList = ref([])
    const routes = useRoute()
    const searchCard = async () => {
      const res = await fetchMyCard()
      myCardList.value = res.data.sort((a, b) => {
        return b.isSelected - a.isSelected
      })
      // 清除loading
      store.dispatch('changeLoading', false)
    }
    let defaultSheet = reactive({
      defaultShow: false,
      defaultForm: {
        isSelected: null,
        status: null,
        id: null
      },
      defaultActions: [
        {value: tm('default_set'), key: 1},
        {value: tm('unbind'), key: 2},
      ],
      onDefaultSelect: async ({key}) => {
        key === 1 ? defaultSheet.defaultForm.isSelected = key : defaultSheet.defaultForm.status = key
        defaultSheet.defaultShow = false
        const res = await upDateMyCard(defaultSheet.defaultForm)
        if (res.code === 1) {
          searchCard()
          defaultSheet.defaultForm = {
            isSelected: null,
            status: null,
            id: null
          }
        }
      },
      onDefaultClick({id, isSelected}) {
        if (isSelected === 1) return
        if (myCardList.value.length === 1) return Toast({message: tm('hint_least_one_card')})
        defaultSheet.defaultShow = true
        defaultSheet.defaultForm.id = id
      }
    })
    searchCard()

    const confirm = () => {
      router.push({
        path: '/bankCardInfo',
        query: {
          isAdd: 1,
          backName: routes.query.backName
        }
      })
    }
    return {
      confirm,
      myCardList,
      ...toRefs(defaultSheet)
    }
  }
}
</script>

<style lang="less" scoped>
.bankCardInfo {
  background-color: #f2f3f5;
  overflow: auto;

  ::v-deep .van-nav-bar {
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
    z-index: 1999;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  ::v-deep .van-switch {
    height: 26px !important;

    .van-switch__node {
      height: 26px !important;
    }
  }

  .content_list {
    border-radius: 5px;
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    background-color: #ffffff;

    .content_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;

      .card_box {
        height: 150px;
        width: 100%;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px 15px;
        position: relative;

        .card_header {
          display: flex;
          color: #ffffff;

          .title {
            font-size: 10px;
            width: 200px;
            margin-right: 10px;
          }

          .is_default {
            font-size: 10px;
            text-align: right;
            flex: 1;
          }
        }

        .card_content {
          font-size: 18px;
          position: absolute;
          bottom: 20px;
          color: #ffffff;
        }
      }
    }
  }

  .confirm {
    margin-top: 20px;
    text-align: center;

    button {
      width: 300px;
      padding: 10px 0;
      color: #ffffff;
      border: none;
      font-size: 16px;
      background: linear-gradient(-45deg, #FF5252, #FF8C3C);
      box-shadow: 0px 4px 10px 0px rgba(255, 92, 78, 0.52);
      border-radius: 29px;
    }
  }
}
</style>
